<template>
    <div class="w-[560px]">
        <Collapsible v-model:open="isOpen">
            <collapsible-trigger as-child>
                <div class="flex w-full items-center justify-between">
                    <div class="flex w-full items-center gap-x-2 justify-between">
                        <div class="flex items-center">
                            <component :is='isOpen?ChevronDown:ChevronUp' class="h-4 w-4 cursor-pointer"/>
                            <p>{{title?title:DataTitle}}</p>
                            <tooltip-provider>
                                <tooltip>
                                    <tooltip-trigger>
                                        <alert-circle-icon class="h-3 ml-1 w-3 text-muted-foreground" />
                                    </tooltip-trigger>
                                    <tooltip-content>
                                        <p class="max-w-60">
                                            {{description}}
                                        </p>
                                    </tooltip-content>
                                </tooltip>
                            </tooltip-provider>
                        </div>
                       
                        <div class="text-xs text-gray-400 flex items-center" v-if="storeId=='useLLMStore'">
                            输出格式
                            <tooltip-provider>
                                <tooltip>
                                    <tooltip-trigger>
                                        <alert-circle-icon class="h-3 w-3 ml-1 text-muted-foreground" color="#999" />
                                    </tooltip-trigger>
                                    <tooltip-content>
                                        <p class="max-w-60">
                                            将引导模型使用JSON格式输出
                                        </p>
                                    </tooltip-content>
                                </tooltip>
                            </tooltip-provider>
                            <select class="ml-1" v-model="outputFormat" @click.stop>
                                <option value="text">text</option>
                                <option value="Markdown">Markdown</option>
                                <option value="Json">Json</option>
                            </select>
                        </div>
                    </div>
                    <component v-if="properties" :is="properties.json.icon" :size="properties.json.size" :color="properties.json.color" />
                </div>
            </collapsible-trigger>
            <collapsible-content class="space-y-3 px-3 py-3">
                <div class="formBox">
                    <div class="flex flex-wrap gap-x-1 mt-3 gap-y-2 items-center">
                        <div v-for="(item,index) in ComponentList" :key="index" :class="[nodeType ,item.class]" >
                            <component 
                            v-if="item.Options" :is="item.type" :key="item.type + '-' + index" 
                            :Options="item.Options" 
                            v-model="item.modelValue"
                            :disabled="baseOutputFormat()"  
                            :title='title'
                            @update:modelValue="(val)=>updateValueFunc(item.index,item.outputkey,val)"
                            > 
                            </component>
                            <component v-else
                            :is="item.type" 
                            :disabled="item.disabled"  
                            :key="item.type + '-else-'+index"  
                            :class="item.class" 
                            v-model="item.modelValue"
                            v-on="item.handelEvent?{click:()=>item.handelEvent&&item.handelEvent(storeId,nodeType)}:{}"
                            @update:modelValue="(val)=>updateValueFunc(item.index,item.outputkey,val)"
                            > 
                                <template v-if="item.type=='Label'">
                                    {{ item.label }}
                                </template>
                            </component>
                        </div>
                    </div>
                    <Button v-if="storeId!=='useLLMStore'" class="mt-2" @click="handleClickAddBtn"><plus-icon class="h-6 w-5 cursor-pointer text-primary" />新增</Button>
                </div>
            </collapsible-content>
        </Collapsible>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted,toRaw,watch, watchEffect} from "vue";
import { ChevronsUpDownIcon,ChevronDown,ChevronUp, PlusIcon, AlertCircleIcon, MinusCircleIcon } from 'lucide-vue-next'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import {Button} from '@/components/ui/button'
import {Checkbox} from '@/components/ui/checkbox'
import SelectComponent from '@/components/vue-flow/nodes/selectComponent.vue'
import {useDynamicCom} from '@/lib/useDynamicComponent'
import {selectReference} from '@/lib/dict'
import  {IFormItemTypes,IOutputItem } from '@/components/vue-flow/nodes/types/form-types'
import {useUpdateNodeData} from '@/lib/updateNodeData'
import { useNode } from '@vue-flow/core'
import storeMap from "@/pina";
import {isArray} from 'lodash'

defineOptions({
  components: {
    Input,
    Label,
    Switch,
    ChevronsUpDownIcon,
    ChevronDown,
    ChevronUp,
    SelectComponent,
    MinusCircleIcon,
    Checkbox,
    Textarea,
    Collapsible, CollapsibleTrigger, CollapsibleContent,
    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
    selectReference
  }
})

const isOpen = ref(true)
const outputFormat = ref('text')
const baseOutputFormat = ()=>{
    switch(outputFormat.value){
        case 'text':
            return true
        case 'Markdown':
            return true
        case 'Json':
            return false
        default:
            return false
    }
}
let ComponentList = ref<IFormItemTypes[]>([])
const node = useNode();
const outputData = storeMap.useStartStore()
const {DLSData,nodeType,storeId,title} = defineProps(['DLSData' as any,'nodeType','storeId','title'])
const emit = defineEmits(['onClickAddBtn'])
const {labels,output,title:DataTitle,description,properties,type} = DLSData
const handleClickAddBtn = () => {
    emit('onClickAddBtn',storeId)
}

const updateValueFunc = (index:number,key='',value:string)=>{
    storeMap[storeId]().updateValue(index,key,value)
    // useUpdateNodeData(
    //     node,
    //     storeMap[storeId]().template.id,
    //     storeMap[storeId]().template.type,
    //     storeMap[storeId]().template.data,
    // )
}
const getDynamicComponent = (output:IOutputItem[])=>{
    const formItem = output.map((item:any,index:number)=>dynamicComponent(item,index)).flat()
    formItem.forEach((item,index)=>{
        if(nodeType=='start'&&index<4){//开始节点，第一条禁用
            item.disabled = true;
            // formItem[3].modelValue = true //默认选中
        }
    })
    ComponentList.value = [...toRaw(labels),...formItem]
}
//渲染form表单
const dynamicComponent = (item:IOutputItem,index:number)=>Object.keys(item).map((key)=>useDynamicCom(key,item,index,nodeType))
   
watch(()=>DLSData.output,()=>{
    getDynamicComponent(DLSData.output)
},{deep:true})

onMounted(()=>{
    getDynamicComponent(output)
})
</script>

<style lang="scss">
.w-150{
    width: 150px;
}
.w-180{
    width: 180px;
}
.w-129{
    width: 129px;
}
.w-230 {
    width: 230px;
}
.w-320 {
width: 320px;
}
.module {
    &.w-\[200px\]{
        width: 229px;
        input{
            width: 100%;
        }
    }
}
</style>